<template>
  <div class="container">
    <main class="content">
      <div class="card">
        <div class="preview-container">
          <SvgLoading :type="type" :color="color" :size="size" :strokeWidth="strokeWidth" :speed="speed" />
        </div>
      </div>
    </main>
  </div>
  <div class="container-Carousel">
    <Carousel :items="slides" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import SvgLoading from "@/components/SvgLoading/index.vue";
import Carousel from "@/components/Carousel/index.vue";

const type = ref("circle"); // circle - 圆形旋转动画   dots - 点阵动画  wave - 波浪动画  spinner - 旋转器动画
const color = ref("#3498db"); //十六进制值 (#RRGGBB)  RGB值 (rgb(255,255,255))  颜色名称 (red, blue等)
const size = ref(80); //设置加载动画的尺寸（宽度和高度）20px - 200px
const strokeWidth = ref(4); // 置线条的粗细（仅对某些动画类型有效） 1-10
const speed = ref(1.5); // 设置动画速度（完成一次动画循环所需时间） 0.5-3

const slides = [
  {
    image: "https://picsum.photos/800/400?random=1",
    title: "第一张幻灯片",
    description: "这是第一张幻灯片的描述内容",
    alt: "幻灯片1",
  },
  {
    image: "https://picsum.photos/800/400?random=2",
    title: "第二张幻灯片",
    description: "这是第二张幻灯片的描述内容",
    alt: "幻灯片2",
  },
  {
    image: "https://picsum.photos/800/400?random=1",
    title: "第一张幻灯片",
    description: "这是第一张幻灯片的描述内容",
    alt: "幻灯片1",
  },
  {
    image: "https://picsum.photos/800/400?random=2",
    title: "第二张幻灯片",
    description: "这是第二张幻灯片的描述内容",
    alt: "幻灯片2",
  },
];
</script>

<style scoped>
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px;
}

.content {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  margin-bottom: 25px;
  padding: 20px;
}

.type-label {
  display: inline-block;
  background: rgba(255, 204, 0, 0.2);
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.8rem;
  margin-top: 5px;
  color: white;
}

.usage-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
}

.usage-card h3 {
  color: #4ec9b0;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.usage-card h3::before {
  content: "»";
  color: #ffcc00;
}

.usage-card p,
.usage-card li {
  color: #e0e0e0;
}

.usage-card ul {
  padding-left: 20px;
  margin: 10px 0;
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
    align-items: center;
  }

  .controls {
    grid-template-columns: 1fr;
  }
}
.container-Carousel {
  width: 80%;
  margin: 0 auto;
}
</style>
